<template>
  <div class="tree">
    <template v-if="!label && !data ? true : false">
      <!-- @goTreeDetail='emitS(item.label,treeAll)' -->
      <tree v-for="(item, key) in treeAll" :key="'treeAll' + key" :label="item.label" :data="item.data" ></tree>
    </template>
    <template v-else>
      <div class="tree-label">
        <span class="switch" :class="{'true':isShow,'false':!isShow}"  @click.stop="toggle" v-if="data.length>0"></span>
        <span class="switch switch-disible" v-else></span>
        <span class="tree-label-text" :class="{'active':label == active}" @click="handleClick(label,data)">{{ label }}</span>
      </div>
      <div class="tree-data" v-show="isShow">
        <!--  @goTreeDetail='emitS(item.label,data)' -->
        <tree ref='refFor' v-for="(item, key) in data" :key="key" :label="item.label" :data="item.data" ></tree>
      </div>
    </template>
  </div>
</template>

<script>
export default {
  name: "tree",
  props: ["label", "data", "treeAll"],
  data() {
    this.active = undefined;
    return {
      isShow: false,
    };
  },
  methods: {
    toggle() {
      // console.log(this.$refs.refFor && this.$refs.refFor[0].data);
      if(this.data.length <= 0)  return false;
      this.isShow = !this.isShow;
    },
    handleClick(label,atData){
      this.active = label;
      console.log(this.active);
      this.$bus.$emit('goTreeDetail',{label,atData})
    },
  },
};
</script>

<style scoped>
.tree {
  margin-left: 10px;
  width: 200px;
  min-height: 32px;
  line-height: 32px;
  margin-top: 2px;
}
.tree-label{
  position: relative;
  padding-left: 14px;
}
.switch{
  position: absolute;
  top: 50%;
  left: 0px;
  transform: translateY(-50%);
  width: 0px;
  height: 0px;
  border: 6px solid transparent;
}
.switch-disible{
  border-left: 6px solid #3333;
}
.tree-label-text{
  font-size: 14px;
}
.true{
  border-top: 6px solid #333;
}
.false{
  border-left: 6px solid #333;
}
</style>